@extends('admin.components.website-layout')

@section('pageContainer')

    <!-- BEGIN PAGE CONTAINER-->

    <div class="container-fluid">

        <!-- BEGIN PAGE HEADER-->

        <div class="row-fluid">

            <div class="span12">

                <!-- BEGIN PAGE TITLE & BREADCRUMB-->

                <h3 class="page-title">

                    视频管理 <small></small>

                </h3>

                {{--<div >--}}
                    {{--<a href="#" class="btn mini purple pull-right" style="height: 20px;line-height: 20px;font-size: 14px;"><i class="icon-print"></i> 导出客户数据excel</a>--}}
                {{--</div>--}}

                <ul class="breadcrumb">

                    <li>

                        <i class="icon-home"></i>

                        <a href="@{{ route('admin-home') }}">视频管理</a>

                        <i class="icon-angle-right"></i>

                    </li>

                    <li><a href="#">编辑视频</a></li>

                    <li class="pull-right no-text-shadow">

                        <div id="dashboard-report-range" class="dashboard-date-range tooltips no-tooltip-on-touch-device responsive" data-tablet="" data-desktop="tooltips" data-placement="top" data-original-title="Change dashboard date range">

                            <i class="icon-calendar"></i>

                            <span></span>

                            <i class="icon-angle-down"></i>

                        </div>

                    </li>

                </ul>

                <!-- END PAGE TITLE & BREADCRUMB-->

            </div>

        </div>

        <!-- END PAGE HEADER-->

        <div id="dashboard">


            <div class="tabbable tabbable-custom boxless">

                <ul class="nav nav-tabs">

                    <li class="active"><a href="#tab_1" data-toggle="tab">新增</a></li>

                    <li class=""><a class="" href="#tab_2" data-toggle="tab">修改</a></li>

                </ul>


                <div class="tab-content">

                    <div class="tab-pane active" id="tab_1">


                        <div class="portlet box blue">

                            <div class="portlet-title">

                                <div class="caption"><i class="icon-reorder"></i>新增视频</div>

                            </div>

                            <div class="portlet-body form">

                            @include('admin.components.warn-label')


                                <form method="POST" action="" class="form-horizontal" enctype="multipart/form-data" id="article_form">
                                    {{ csrf_field() }}

                                    <h3 class="form-section">视频信息</h3>

                                    <div class="row-fluid">

                                        <div class="control-group">

                                            <label class="control-label">选择分类</label>

                                            <div class="controls">

                                                <select class="span4 select2_category" data-placeholder="分类" tabindex="1" name="video_type_id" id="video-type">

                                                    <option value=""></option>
                                                    @foreach( $types as $type )
                                                        <option value="{{ $type->id }}" >{{  $type->name }}</option>
                                                    @endforeach

                                                </select>

                                            </div>

                                        </div>


                                        <div class="control-group">

                                            <label class="control-label">视频描述</label>

                                            <div class="controls">

                                                <input type="text" class="m-wrap span4" name='name' placeholder="视频描述">


                                            </div>

                                        </div>

                                        <div class="control-group">

                                            <label class="control-label">排序</label>

                                            <div class="controls">

                                                <input type="number" class="m-wrap span4" name='sort' placeholder="排序、数值越大排在越前">

                                            </div>

                                        </div>

                                        <div class="control-group">

                                            <label class="control-label">英文描述</label>

                                            <div class="controls">

                                                <input type="text" class="m-wrap span4" name='english_title' placeholder="英文描述">


                                            </div>

                                        </div>

                                        <div class="control-group">

                                            <label class="control-label">视频播放地址</label>

                                            <div class="controls">

                                                <input type="text" class="m-wrap span4" name='url' placeholder="http://">


                                            </div>

                                        </div>

                                        <div class="control-group">

                                            <label class="control-label">预览图</label>

                                            <div class="controls">

                                                <div class="fileupload fileupload-new" data-provides="fileupload">

                                                    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">

                                                        <img src="" alt="" />

                                                    </div>

                                                    <div class="fileupload-preview-one fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>

                                                    <div>

                                                        <span class="btn btn-file"><span class="fileupload-new">选择图片</span>

                                                        <span class="fileupload-exists">修改</span>

                                                        <input type="file" class="default" name='preview_img' /></span>

                                                        <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">取消</a>

                                                    </div>

                                                </div>

                                                {{--<span class="label label-important">注意!</span>--}}

                                                {{--<span>--}}
                {{--&nbsp;                                  图片格式为 jpg 或 png，宽高比为 16:9，文件尺寸不超过 200KB--}}
                                                {{--</span>--}}

                                            </div>

                                        </div>



                                    </div>

                                    <!--/row-->
                                    <div class="form-actions">

                                        <button type="submit" class="btn blue"  id="button_submit" disabled><i class="icon-ok"></i> 确认提交</button>

                                        <button type="reset" class="btn" style="float: right">清空</button>

                                    </div>

                                </form>

                                <!-- END FORM-->

                            </div>

                        </div>

                    </div>

                    <div class="tab-pane" id="tab_2">

                        <div class="portlet box green">

                            <div class="portlet-title">

                                <div class="caption"><i class="icon-reorder"></i>修改视频</div>

                            </div>

                            <div class="portlet-body form">

                                {{--<h3 class="form-section">现有客户列表</h3>--}}

                                <div class="row-fluid">

                                    <div class="span12">

                                        <!-- BEGIN SAMPLE TABLE PORTLET-->

                                        <table class="table table-striped table-bordered table-advance table-hover" id="sort_table">

                                            <thead>

                                            <tr>

                                                <th><i class=""></i> 描述</th>

                                                <th><i class="icon-briefcase"></i> 排序</th>

                                                <th><i class="icon-briefcase"></i> 类别</th>

                                                <th class="hidden-phone"><i class="icon-user"></i> 创建时间</th>

                                                <th><i class="icon-shopping-cart"></i> 修改时间</th>

                                                <th>操作</th>

                                            </tr>

                                            </thead>

                                            <tbody>

                                            @foreach( $videos as $video)
                                                <tr>

                                                    <td class="highlight">

                                                        <span>{{ $video->name }}</span>

                                                    </td>

                                                    <td class="">
                                                        <span>{{ $video->sort }}</span>
                                                    </td>

                                                    <td class="hidden-phone">{{ $types->find((int)$video->video_type_id)->name }}</td>

                                                    <td>{{ $video->created_at }}</td>
                                                    <td>{{ $video->updated_at }}</td>

                                                    <td>
                                                        {{--@if(!$video->frozen)--}}
                                                        <a data-toggle="modal" href="#model_editor" data-href="{{  'web-video/'.$video->id.'/edit'  }}" class="btn mini purple editor-trigger"><i class="icon-edit"></i> 修改</a>

                                                        <form action="{{  'web-video/'.$video->id  }}" style="display: inline" method="post">
                                                            {{ csrf_field() }}
                                                            {{ method_field('DELETE') }}
                                                            <button type="submit" class="btn mini black del-line"><i class="icon-trash"></i> 删除</button>
                                                        </form>
                                                    </td>

                                                </tr>
                                            @endforeach

                                            </tbody>

                                        </table>


                                        <!-- END SAMPLE TABLE PORTLET-->

                                    </div>


                                </div>

                            </div>

                        </div>

                    </div>



                </div>

            </div>

        </div>

    </div>

    <!-- END PAGE CONTAINER-->

    <style>

        .modal {
            width: 850px;
            margin-left: -300px;
        }

    </style>

    {{-- Model Begin --}}

    <div id="model_editor" class="modal hide fade" tabindex="-1" data-focus-on="input:first">

        <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

            <h3>修改视频信息</h3>

        </div>


        <div class="modal-body">

            <form method="POST" action="" class="form-horizontal" enctype="multipart/form-data" id="editor-form">
                {{ method_field('PATCH') }}
                {{ csrf_field() }}

                {{--<h3 class="form-section">帐户信息</h3>--}}

                <div class="row-fluid">

                    <div class="control-group">

                        <label class="control-label">选择分类</label>

                        <div class="controls">

                            <select class="span4 select2_category" data-placeholder="分类" tabindex="1" name="video_type_id" id="edit-video-type">

                                <option value=""></option>
                                @foreach( $types as $type )
                                    <option value="{{ $type->id }}" >{{  $type->name }}</option>
                                @endforeach

                            </select>

                        </div>

                    </div>


                    <div class="control-group">

                        <label class="control-label">视频描述</label>

                        <div class="controls">

                            <input type="text" class="m-wrap span8" name='name' placeholder="视频描述">

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">排序</label>

                        <div class="controls">

                            <input type="number" class="m-wrap span4" name='sort' placeholder="排序、数值越大排在越前">

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">英文描述</label>

                        <div class="controls">

                            <input type="text" class="m-wrap span8" name='english_title' placeholder="英文描述">


                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">视频播放地址</label>

                        <div class="controls">

                            <input type="text" class="m-wrap span8" name='url' placeholder="http://">

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">预览图</label>

                        <div class="controls">

                            <div class="fileupload fileupload-new" data-provides="fileupload">

                                <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">

                                    <img src="" alt=""  id="edit-preview_img"/>

                                </div>

                                <div class="fileupload-preview-one fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>

                                <div>

                                    <span class="btn btn-file"><span class="fileupload-new">选择图片</span>

                                    <span class="fileupload-exists">修改</span>

                                    <input type="file" class="default" name='preview_img' /></span>

                                    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">取消</a>

                                </div>

                            </div>

                            {{--<span class="label label-important">注意!</span>--}}

                            {{--<span>--}}
                {{--&nbsp;                                  图片格式为 jpg 或 png，宽高比为 16:9，文件尺寸不超过 200KB--}}
                                                {{--</span>--}}

                        </div>

                    </div>


                </div>

                <!--/row-->



            </form>


        </div>

        <div class="modal-footer">

            <button type="button" data-dismiss="modal" class="btn"><i class="icon-times"></i> 取消</button>

            <button class="btn green" type="submit" form="editor-form"><i class="icon-ok"></i> 提交修改</button>

        </div>




    </div>
    {{-- Model End --}}

@endsection

@section('pluginStyle')
    <link rel="stylesheet" type="text/css" href="/at/media/css/select2_metro.css">
    <link rel="stylesheet" type="text/css" href="/at/media/css/bootstrap-fileupload.css" />


    <link rel="stylesheet" type="text/css" href="/at/media/css/jquery.gritter.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/chosen.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/jquery.tagsinput.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/clockface.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/bootstrap-wysihtml5.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/datepicker.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/timepicker.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/colorpicker.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/bootstrap-toggle-buttons.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/datetimepicker.css" />
    <link rel="stylesheet" type="text/css" href="/at/media/css/multi-select-metro.css" />
    <link href="/at/media/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>

    {{-- Data Table css ：可筛选table --}}
    <link rel="stylesheet" href="/at/media/css/DT_bootstrap.css" />
    {{-- End Data Table css --}}
    {{-- 编辑器 --}}
    <link href="/um-edit/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">

@endsection


@section('pluginScript')

    <!-- loc multi address -->
    <script type="text/javascript" src="/at/media/js/area.js"></script>
    <script type="text/javascript" src="/at/media/js/location.js"></script>

    <script type="text/javascript" src="/at/media/js/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="/at/media/js/wysihtml5-0.3.0.js"></script>
    <script type="text/javascript" src="/at/media/js/bootstrap-wysihtml5.js"></script>
    <script type="text/javascript" src="/at/media/js/jquery.tagsinput.min.js"></script>
    <script type="text/javascript" src="/at/media/js/jquery.toggle.buttons.js"></script>
    <script type="text/javascript" src="/at/media/js/bootstrap-datepicker.js"></script>

    <script type="text/javascript" src="/at/media/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/at/media/js/clockface.js"></script>
    <script type="text/javascript" src="/at/media/js/date.js"></script>
    <script type="text/javascript" src="/at/media/js/daterangepicker.js"></script>
    <script type="text/javascript" src="/at/media/js/bootstrap-colorpicker.js"></script>
    <script type="text/javascript" src="/at/media/js/bootstrap-timepicker.js"></script>
    <script type="text/javascript" src="/at/media/js/jquery.inputmask.bundle.min.js"></script>
    <script type="text/javascript" src="/at/media/js/jquery.input-ip-address-control-1.0.min.js"></script>
    <script type="text/javascript" src="/at/media/js/jquery.multi-select.js"></script>
    <script src="/at/media/js/bootstrap-modal.js" type="text/javascript" ></script>
    <script src="/at/media/js/bootstrap-modalmanager.js" type="text/javascript" ></script>

    <script type="text/javascript" src="/at/media/js/select2.min.js"></script>

    <script type="text/javascript" src="/at/media/js/bootstrap-fileupload.js"></script>
    <script src="/at/media/js/form-samples.js"></script>
    <script src="/at/media/js/form-components.js"></script>
    <script src="/at/media/js/jquery.validate.min.js"></script>
    <script src="/at/media/js/jquery.form.js"></script>
    {{--<script src="/at/media/js/button-submit-able.js"></script>--}}

    {{--@include('admin.components.vue')--}}

    {{-- Data Table JS : 加载顺序不能反 --}}
    {{--<script type="text/javascript" src="/at/media/js/jquery.dataTables.js"></script>--}}
    {{--<script type="text/javascript" src="/at/media/js/DT_bootstrap.js"></script>--}}
    {{-- End Data Table JS --}}

    {{--<script type="text/javascript" src="/at/media/js/select2_locale_zh-CN.js"></script>--}}

    {{-- 编辑器 --}}
    {{--<script type="text/javascript" src="/um-edit/third-party/jquery.min.js"></script>--}}
    <script type="text/javascript" src="/at/media/js/ckeditor.js"></script>
    <script type="text/javascript" charset="utf-8" src="/um-edit/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/um-edit/umeditor.min.js"></script>
    {{--<script type="text/javascript" src="/um-edit/lang/zh-cn/zh-cn.js"></script>--}}

    {{--<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>--}}






    <script>
        function checkinput(){
//            alert('');
            $.validator.addMethod("password",function (value,element) {
                var not_chinese=/^[A-Za-z0-9.(){};@_-]+$/;
                return this.optional(element)||(not_chinese.test(value));

            },"密码不能包含中文");
        }
        !function(){


            function _addressFindAndFill(selectAppendix,hiddenPrefix) {

                var loc = new Location();

                // todo 重写函数
                var provinceId = $('#loc_province' + selectAppendix ).val();
                var cityId =  $('#loc_city' + selectAppendix ).val();
                var townId =  $('#loc_town' + selectAppendix ).val();

                var province = loc.find('0')[provinceId];
                var city = loc.find('0,'+provinceId)[cityId];
                var town = loc.find('0,'+provinceId+','+cityId)[townId];

                $( hiddenPrefix +'province').val(province);
                $( hiddenPrefix +'city').val(city);
                $( hiddenPrefix +'town').val(town);

                loc = null;

            };

            // todo disabled SubmitBtn more elegant
            var allowSubmit = !0;

            $('#article_form').on('submit',function(e){

                if (allowSubmit) {
                    _addressFindAndFill('','#cust_');
                    allowSubmit = 0;
                } else {
                    e.preventDefault();
                }

            });

            $('#editor-form').on('submit',function(e){

                if (allowSubmit) {
                    _addressFindAndFill('_2','#edit_');
                    allowSubmit = 0;
                } else {
                    e.preventDefault();
                }

            });

            function _disableBtn (target){
                target.attr('disabled',true);
                target.addClass('disabled');
                target.css('cusor','not-allowed');
            }

        }();

        //        $(function (){
        //            $("button[type='submit']").attr("disabled",false);
        //        });
        $(function () {
            var form1 = $('#article_form');

            $(".control-group.success input").css("color","#333");
            $(".control-group.success .control-label").css("color","#333");

            form1.validate({
                submitHandler:function(form1){
                    {{--<script src="/at/media/js/jquery.form.js"></script>--}}
                    if (App) {
                        App.blockUI($('.portlet'));
                        if ($('.modal')) App.blockUI($('.modal'));
                    } else {
                        console.log('Please use after App.js initialized')
                    }

//                    var ue = UM.getEditor('myEditor', {
//                        toolbars: [[]]
//                    });
//                    ue.ready(function() {
//                        if ( ue.getContent()=='' )
//                        {
//                            alert('视频内容不能为空');
//                            exit();
//                        }
//                    });

                    form1.submit();

                },
                errorElement: 'span', //default input error message container
                errorClass: 'help-inline', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {
                    video_type_id: {
                        required: true,
                    },
                    name: {
                        required: true,
                    },

                    preview_img: {
                        required: true
                    },
                    url: {
                        required: true
                    },
                },
                messages:{
                    video_type_id: {
                        required: '类别必须',
                    },
                    name: {
                        required:'视频描述不得为空',
                    },

                    preview_img: {
                        required:'请上传预览图',
                    },
                    url: {
                        required: '视频播放地址不得为空'
                    },

                },


                highlight: function (element) { // hightlight error inputs
                    $(element)
                            .closest('.help-inline').removeClass('ok'); // display OK icon
                    $(element)
                            .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
                },

                unhighlight: function (element) { // revert the change dony by hightlight
                    $(element)
                            .closest('.control-group').removeClass('error'); // set error class to the control group
                },

                success: function (label) {
                    label
                            .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                            .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group

                },


            });

            $('#editor-form').validate({
                submitHandler: function(thisFrom){
                    if (App) {
                        App.blockUI($('.portlet'));
                        if ($('.modal')) App.blockUI($('.modal'));
                    } else {
                        console.log('Please use after App.js initialized')
                    }
                    thisFrom.submit();
                },
                errorElement: 'span', //default input error message container
                errorClass: 'help-inline', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {
                    video_type_id: {
                        required: true,
                    },
                    name: {
                        required: true,
                    },
                    url: {
                        required: true
                    },

                },
                messages:{
                    video_type_id: {
                        required: '类别必须',
                    },
                    name: {
                        required:'视频描述不得为空',
                    },
                    url: {
                        required: '视频播放地址不得为空'
                    },

                },


                highlight: function (element) { // hightlight error inputs
                    $(element)
                            .closest('.help-inline').removeClass('ok'); // display OK icon
                    $(element)
                            .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
                },

                unhighlight: function (element) { // revert the change dony by hightlight
                    $(element)
                            .closest('.control-group').removeClass('error'); // set error class to the control group
                },

                success: function (label) {
                    label
                            .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                            .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group

                },


            });

        });

    </script>

    {{--<script src="/at/media/js/submit-block.js"></script>--}}

    <script>
        //        $(function button_able () {
        //            $("button[type='submit']").attr("disable","disabled");
        //        });

        $(function (){
            $("#button_submit").attr("disable","disabled");
        });
        $(function () {

            var formEditor = $('#editor-form');

            function addLoading() {
                if (App) {
                    App.blockUI($('#editor-form'));
                    $('#model_editor .blockElement').css({"left":"40%","top":"40%","position":"absolute"});
//                    if ($('.modal')) App.blockUI($('.modal'));

                } else {
                    console.log('Please use after App.js initialized')
                }
            }
            // 修改数据
            $('.dataTable').delegate('.editor-trigger','click',function () {
                addLoading();

                $.ajax({
                    method: "GET",
                    url: $(this)[0].dataset.href,
                }).done(function(data){
                    for (var k in data) {
                        console.log(k+'=>'+data[k]);

                        if (k === 'preview_img'  ) continue;
                        if (formEditor[0][k]) formEditor[0][k].value = data[k];
                    }
                    formEditor[0].action = 'web-video/' + data.id;

                    $('#edit-preview_img').attr('src',data['preview_img']);

                    $('#edit-video-type').val(data['video_type_id']).trigger('change');


                    if (App) {

                        App.unblockUI($('#editor-form'));

                    } else {
                        console.log('Please use after App.js initialized');
                    }

                }).fail(function(){
                    console.log('Failed get temple data');
                    if (App) {

                        App.unblockUI($('#editor-form'));

                    } else {
                        console.log('Please use after App.js initialized');
                    }
                })
            });


        });
    </script>

    <script>
        {{--  Data Table JS 表格排序/搜索等 --}}
          $('#sort_table').dataTable({
            // TODO 是否分页
            bPaginate: true,
            // 分页数
//            iDisplayLength: -1,
            // 分页选项
//            aLengthMenu: [
//                [25, 50, 100, 200, -1],
//                [25, 50, 100, 200, "全部"]
//            ],
            // 按原始数据初始化
            aaSorting: [],
            // 指定需要排序的列
            aoColumns: [
                null,
                null,
                null,
                null,
                null,
                { "bSortable": false },
            ],
            'oLanguage': {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
        $('.dataTables_length select').select2();
    </script>


@endsection


@section('pluginInit')
    FormSamples.init();
    FormComponents.init();
@endsection
